<template>
  <div class="a">
    <el-container>
      <el-header>
        <div class="header">
          <div class="img">
            <img src="../assets/images/logo2.png" class="user-avatar" />
          </div>
          <div class="info">
            <div class="username">{{ username }}</div>
            <div class="other">
              <span class="center">收 藏 ：{{ CollectList.length }}</span>
              <span class="center">喜 欢 ：{{ LoveList.length }}</span>
            </div>
            <div class="email">邮 箱：{{ email }}</div>
          </div>
        </div>
      </el-header>
      <el-container>
        <el-aside class="side" width="200px">
          <el-menu
            :default-active="activeId"
            class="el-menu-vertical-demo"
            @select="handleUser"
            background-color="transparent"
            text-color="#fff"
            active-text-color="#ffd04b"
          >
            <el-menu-item index="0">
              <i class="el-icon-menu"></i>
              <template #title>个人信息</template>
            </el-menu-item>
            <el-menu-item index="1">
              <i class="el-icon-menu"></i>
              <template #title>作 品</template>
            </el-menu-item>
            <el-menu-item index="2">
              <i class="el-icon-menu"></i>
              <template #title>喜 欢 </template>
            </el-menu-item>
            <el-menu-item index="3">
              <i class="el-icon-menu"></i>
              <template #title>收 藏</template>
            </el-menu-item>
            <!-- <div v-for="item in types">
              <el-menu-item :index="item.id">
                <i class="el-icon-menu"></i>
                <template #title>{{ item.name }}</template>
              </el-menu-item>
            </div> -->
          </el-menu>
        </el-aside>
        <el-main class="main">
          <div class="userinfo" v-if="activeId == '0'">
            <div class="box">
              <span class="border"></span>
              <span class="border"></span>
              <span class="border"></span>
              <span class="border"></span>
              <div class="personal">
                <div class="urlimg">
                  <img src="../assets/images/logo.png" alt="" />
                </div>
                <div class="personal-info">
                  <div>用户：{{ username }}</div>
                  <div>邮箱：{{ email }}</div>
                  <div>作品数量：{{ ownList.length }}</div>
                  <div>点赞数量：{{ LoveList.length }}</div>
                  <div>收藏数量：{{ LoveList.length }}</div>
                  <el-button @click="typeFlag = true">推荐类型设置</el-button>
                </div>
              </div>

              <!-- </div> -->
              <!-- </div> -->
            </div>
          </div>
          <videoTypeList :typeVideoList="typeVideoList" v-else></videoTypeList>
        </el-main>
      </el-container>
      <el-dialog
        :close-on-click-modal="false"
        :before-close="typeCloses"
        :visible.sync="typeFlag"
        append-to-body
        title="推荐类型修改"
        width="650px"
      >
        <el-checkbox
          v-model="iscomment"
          style="margin: 0 0 25px 0"
          true-label="true"
          false-label="false"
        >
          无需推荐，随机观看视频
        </el-checkbox>
        <div class="tips">*我们将根据您已选择的类型进行重点推荐</div>
        <el-transfer
          v-model="value"
          :data="commmentData"
          :titles="['未选择', '已选择']"
          style="margin: 10px auto"
        />
        <div class="footer">
          <el-button class="n_btn" type="primary" @click="submit"
            >确认更改</el-button
          >
          <el-button @click="typeFlag = false" class="up">取消</el-button>
        </div>
      </el-dialog>
    </el-container>
  </div>
</template>

<script>
import videoTypeList from "@/components/videoTypeList.vue";
import {
  getId,
  getUsername,
  getEmail,
  getType,
  getisCommend,
  setisCommend,
  setType,
} from "@/utils/auth";
import api from "@api/index";
export default {
  components: {
    videoTypeList,
  },
  data() {
    return {
      iscomment: false,
      username: "",
      email: "",
      activeId: "0",
      CollectList: [],
      LoveList: [],
      ownList: [],
      typeFlag: false,
      typeVideoList: [
        // {
        //   Id: 86,
        //   Key: "lixianhe/1698248196096.mp4",
        //   Hash: "ln1vKceq3EvaojbQF322d_F0yXo7",
        //   Type: "2",
        //   Cover: "",
        //   Url: "http://wxapp.qiniu.ijemy.com/lixianhe/1698248497448.mp4",
        //   Uid: 0,
        //   Title: "神奇宝贝",
        // },
        // {
        //   Id: 86,
        //   Key: "lixianhe/1698248196096.mp4",
        //   Hash: "ln1vKceq3EvaojbQF322d_F0yXo7",
        //   Type: "2",
        //   Cover: "",
        //   Url: "http://wxapp.qiniu.ijemy.com/lixianhe/1698246870462.mp4",
        //   Uid: 0,
        //   Title: "神奇宝贝.mp4",
        // },
        // {
        //   Id: 86,
        //   Key: "lixianhe/1698248196096.mp4",
        //   Hash: "ln1vKceq3EvaojbQF322d_F0yXo7",
        //   Type: "2",
        //   Cover: "",
        //   Url: "",
        //   Uid: 0,
        //   Title: "神奇宝贝.mp4",
        // },
        // {
        //   Id: 86,
        //   Key: "lixianhe/1698248196096.mp4",
        //   Hash: "ln1vKceq3EvaojbQF322d_F0yXo7",
        //   Type: "2",
        //   Cover: "",
        //   Url: "",
        //   Uid: 0,
        //   Title: "神奇宝贝.mp4",
        // },
        // {
        //   Id: 86,
        //   Key: "lixianhe/1698248196096.mp4",
        //   Hash: "ln1vKceq3EvaojbQF322d_F0yXo7",
        //   Type: "2",
        //   Cover: "",
        //   Url: "",
        //   Uid: 0,
        //   Title: "神奇宝贝.mp4",
        // },
        // {
        //   Id: 86,
        //   Key: "lixianhe/1698248196096.mp4",
        //   Hash: "ln1vKceq3EvaojbQF322d_F0yXo7",
        //   Type: "2",
        //   Cover: "",
        //   Url: "",
        //   Uid: 0,
        //   Title: "神奇宝贝.mp4",
        // },
        // {
        //   Id: 86,
        //   Key: "lixianhe/1698248196096.mp4",
        //   Hash: "ln1vKceq3EvaojbQF322d_F0yXo7",
        //   Type: "2",
        //   Cover: "",
        //   Url: "",
        //   Uid: 0,
        //   Title: "神奇宝贝.mp4",
        // },
      ],
      commmentData: [],
      value: [],
    };
  },
  mounted() {
    this.username = getUsername();
    this.email = getEmail();
    this.iscomment = getisCommend();
    this.getCollectList(getId());
    this.getLoveList(getId());
    this.getownList(getId());
    this.getTypes();

    console.log(typeof getisCommend());
    console.log(getType());
    this.value = getType();
  },
  methods: {
    getTypes() {
      this.commmentData = [];
      api.getType().then(
        (res) => {
          console.log(res);
          for (let i = 0; i < res.data.length; i++) {
            var data = { key: 0, label: "" };
            data.key = res.data[i].id;
            data.label = res.data[i].name;
            this.commmentData.push(data);
          }
          console.log(this.commmentData);
        },
        (err) => {
          console.log(err);
        }
      );
    },
    getCollectList(id) {
      var data = {
        uid: id,
      };
      api.getCollect(data).then(
        (res) => {
          console.log(res);
          this.CollectList = res.data;
        },
        (err) => {
          console.log(err);
        }
      );
    },
    getLoveList(id) {
      var data = {
        uid: id,
      };
      api.getLove(data).then(
        (res) => {
          console.log(res);
          this.LoveList = res.data;
        },
        (err) => {
          console.log(err);
        }
      );
    },
    getownList(id) {
      var data = {
        uid: id,
      };
      api.getOwn(data).then(
        (res) => {
          console.log(res);
          this.ownList = res.data;
        },
        (err) => {
          console.log(err);
        }
      );
    },
    putcommend(id, isCommend) {
      var data = {
        id: id,
        isCommend: isCommend,
      };
      console.log(data);
      api.ifrecommend(data).then(
        (res) => {
          setisCommend(isCommend);
        },
        (err) => {
          console.log(err);
        }
      );
    },
    handleUser(key, keyPath) {
      this.activeId = key;
      console.log(this.activeId);
      if (key === "3") {
        this.typeVideoList = this.CollectList;
      } else if (key === "2") {
        this.typeVideoList = this.LoveList;
      } else if (key === "1") {
        this.typeVideoList = this.ownList;
      } else {
        this.typeVideoList = [];
      }
    },
    typeCloses() {
      this.typeFlag = false;
    },
    submit() {
      console.log(typeof iscomment);
      var data = {
        id: getId(),
        type: this.value.toString(),
      };
      api.selectType(data).then(
        (res) => {
          setType(this.value);
          this.$notify({
            title: "修改成功！",
            type: "success",
            duration: 4000,
          });
          this.typeFlag = false;
        },
        (err) => {
          console.log(err);
        }
      );
      var iscomment = JSON.parse(this.iscomment);
      if (this.iscomment !== getisCommend()) {
        this.putcommend(getId(), iscomment);
      }
    },
  },
};
</script>

<style scoped>
.a {
  width: 100%;
  min-height: 100vh;
  background-image: url(../assets/images/bg3.jpg);
  background-size: cover;
  background-position: center center;
}
.header {
  /* background-color: #ccc; */
  padding: 20px 100px;
  display: flex;
  align-items: center;
  color: #fff;

  /* height: 100%; */
}

.user-avatar {
  width: 180px;
}
.info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-left: 20px;
}
.username {
  /* margin-bottom: 10px; */
  font-size: 40px;
  /* color: #2a3cad; */
}
.other {
  margin: 10px 0;
}
.center {
  margin-right: 60px;
  font-size: 14px;
}
.email {
  font-size: 12px;
  color: #ccc;
}

.el-aside {
  /* background-color: #ffffff33; */
  margin-top: 200px;
  margin-left: 100px;
  color: var(--el-text-color-primary);
  text-align: left;
  /* height: 80%; */
}
.el-menu {
  border: 0 !important;
}
.el-menu-item,
.el-submenu__title {
  height: 50px;
  line-height: 50px;
}

.el-menu-item:hover {
  background-color: transparent !important;
  /* color: rgb(255, 208, 75) !important; */
}
.main {
  margin-top: 90px;
}
.footer {
  margin: 20px 35%;
}

/* 自我介绍卡片 */

.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 320px;
  height: 400px;
  background: #111845a6;
  box-sizing: border-box;
  overflow: hidden;
  box-shadow: 0 20px 50px rgb(23, 32, 90);
  border: 2px solid #2a3cad;
  color: white;
  padding: 20px;
}

.box:before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.1);
  transition: 0.5s;
  pointer-events: none;
}

.box:hover:before {
  left: -50%;
  transform: skewX(-5deg);
}

.box .personal {
  position: absolute;
  top: 15px;
  left: 15px;
  right: 15px;
  bottom: 15px;
  border: 1px solid #f0a591;
  padding: 20px;
  text-align: center;
  box-shadow: 0 5px 10px rgba(9, 0, 0, 0.8);
}

.urlimg {
  width: 60px;
  height: 60px;
  margin: auto;
}
.urlimg img {
  width: 100%;
}

.personal-info {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  margin-top: 20px;
}
.personal-info div {
  margin: 5px 0;
}
.personal-info .el-button {
  background-color: rgba(7, 42, 237, 0.2);
  color: #fff;
  /* padding: 6px; */
  width: 70%;
  height: 40px;
  border-radius: 30px;
  font-size: 20px;
  font-family: "KaiTi";
  font-weight: 600;
  margin: 40px 15%;
}
.personal-info .el-button:hover {
  background-color: rgba(140, 141, 142, 0.4);
  animation: login_mation 0.5s;
}
.box .border {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  /* box-sizing: border-box; */
}

.box .border:nth-child(1) {
  left: -50%;
  transform: rotate(0deg);
}

.box .border:nth-child(2) {
  left: -82px;
  top: -200px;
  width: 400px;
  transform: rotate(90deg);
}

.box .border:nth-child(3) {
  left: 50%;
  transform: rotate(180deg);
}

.box .border:nth-child(4) {
  top: 200px;
  left: -2px;
  width: 400px;
  transform: rotate(270deg);
}

.box .border:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  background: #50dfdb;
  animation: animate 4s linear infinite;
}

@keyframes animate {
  0% {
    transform: scaleX(0);
    transform-origin: left;
  }

  50% {
    transform: scaleX(1);
    transform-origin: left;
  }

  50.1% {
    transform: scaleX(1);
    transform-origin: right;
  }

  100% {
    transform: scaleX(0);
    transform-origin: right;
  }
}

.tips {
  font-size: 12px;
  color: rgb(230, 62, 62);
}
</style>